@import './assets/styles/hairline.scss';

html,
body {
  margin: 0;
  padding: 0;
}

html,
body,
#root {
  height: 100%;
}

p,
h2,
h3 {
  margin: 0;
}


// 测试：css 也开始具备 less/sass 才拥有的特性，比如变量
:root {
  --main-color: skyblue;
}

// 测试：Mixins
@mixin WandH($wh, $hh) {
  width: $wh;
  height: $hh;
}

// 插件 => 将px 编译为 vw
.box {
  background-color: var(--main-color);
  position: relative;
  @include WandH(150px, 150px);
  @include hairline(top, red, 2px);
  @include hairline(bottom, rgb(0, 90, 30), 5px);
  @include hairline-remove(top)
}

.box2 {
  background-color: var(--main-color);
  position: relative;
  @include WandH(100px, 100px);
}


// 原生CSS变量来定制极客园项目的主题
:root:root {
  --adm-color-primary: #fc6627;
  --adm-color-success: #00b578;
  --adm-color-warning: #ff8f1f;
  --adm-color-danger: #ff3141;
  --adm-color-white: #ffffff;
  --adm-color-weak: #999999;
  --adm-color-light: #cccccc;
  --adm-border-color: #eeeeee;
  --adm-font-size-main: 13px;
  --adm-color-text: #333333;
}

// 用于ico图标默认的样式
.icon {
  width: 1em; height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}